<template>
    <el-dialog :close-on-click-modal="false" :visible="importFlag" class="zdy-dialog" width="930px" :title="title" :before-close="handleCloseDialog">
        <div class="el-dialog-div">
            <el-row  v-if="!importType" :gutter="20" class="importSelect">
                <el-col :span="12">
                    <div class="carList" @click="handleImportChange('file')">
                        <div class="carView">
                            <i class="el-icon-document"></i>
                            <p class="desc"></p>
                        </div>
                    </div>
                    <!--人员信息-->
                    <p class="bottomTitle">{{this.i18n.t('Personnel information')}}</p>
                </el-col>
                <el-col :span="12">
                    <div class="carList" @click="handleImportChange('pic')">
                        <div class="carView">
                            <i class="el-icon-user-solid"></i>
                            <p class="desc"></p>
                        </div>
                    </div>
                    <!--生物特征-->
                    <p class="bottomTitle">{{this.i18n.t('biosignature')}}</p>
                </el-col>
            </el-row>
            <div v-if="importType=='pic'">
                <el-alert
                        show-icon
                        :closable="false"
                        :title="$t('inmportTips')"
                        type="warning">
                </el-alert>
                <br>
                <el-row :gutter="20">
                    <el-col :span="8">
                        <el-form ref="form" :model="form">
                            <!--{{devTypeList}}-->
                            <el-form-item style="width: 200px" :label="$t('image type')">
                                <el-select @change="picTypeChange" v-model="form.picType" :placeholder="$t('Please select')">
                                    <el-option
                                            v-for="item in devTypeList"
                                            :key="item.label"
                                            :label="item.label"
                                            :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>


                            <!--<el-radio-group v-model="form.picType" size="small">-->
                            <!--<el-radio-button label="人脸"></el-radio-button>-->
                            <!--<el-radio-button label="虹膜"></el-radio-button>-->
                            <!--<el-radio-button label="掌静脉"></el-radio-button>-->
                            <!--</el-radio-group>-->
                            <el-form-item label="">
                                <el-upload
                                        style="height:0"
                                        class="uploadBiosignature"
                                        ref="uploadBiosignature"
                                        multiple
                                        :file-list="fileListBio"
                                        :show-file-list="false"
                                        :accept="importAccept"
                                        action="#"
                                        :on-success="handelSuccess"
                                        :on-preview="handlePreview"
                                        :on-remove="handleRemove"
                                        :on-change="(event,fileList)=>{handleChangeBio(event,fileList)}"
                                        :auto-upload="false">
                                </el-upload>
                                <!--选择图片按钮-->
                                <el-button icon="el-icon-paperclip" @click="selectPic" size="small" type="">{{this.i18n.t('Select Picture')}}</el-button>
                                <p>{{this.i18n.t('file format')}}：{{importAccept}}</p>
                                <div style="color: red;">
                                    <p v-if="form.picType===0">{{this.i18n.t('Naming convention')}}：<br>1、{{this.i18n.t('name')}} <br>2、{{this.i18n.t('Name_ ID number')}}
                                        <br>{{this.i18n.t('Example')}}：<br>1、{{this.i18n.t('Zhang San')}} <br>2、 {{this.i18n.t('Zhang San_ ten thousand')}}</p>
                                    <p v-if="form.picType===1">{{this.i18n.t('Naming convention')}}：<br>1、{{this.i18n.t('Name_ Left (right) eye')}} <br> 2、{{this.i18n.t('Name_ ID number_ Left (right) eye')}}<br>{{this.i18n.t('Example')}}：<br>1、{{this.i18n.t('Zhang San_ left eye')}} <br> 2、{{this.i18n.t('Zhang San_ 10000_ left eye')}}</p>
                                    <p v-if="form.picType===2">{{this.i18n.t('Naming convention')}}：<br>1、{{this.i18n.t('Name_ Left (right) hand')}} <br> 2、{{this.i18n.t('Name_ ID number_ Left (right) hand')}}<br>{{this.i18n.t('Example')}}：<br>1、{{this.i18n.t('Zhang San_ left hand')}} <br> 2、{{this.i18n.t('Zhang San_ 10000_ left hand')}}</p>
                                </div>
                            </el-form-item>
                        </el-form>
                    </el-col>
                    <el-col :span="16">

                        <!--<ul class="infinite-list" v-infinite-scroll="load" style="overflow:auto;border: 1px solid #B500FE;height: 300px;">-->
                            <!--<li v-for="i in count" class="infinite-list-item">{{ i }}</li>-->
                        <!--</ul>-->

                        <div class="carList importPicView" style="">
                            <!--部分图片导入失败时，显示的列表-->
                            <div v-if="errorData.data.length" style="color: red;">
                                <el-link icon="el-icon-document" v-for="(item,index) in errorData.data"
                                         :title="item.erroMessage"
                                         :underline="false" class="picName">
                                    {{item.filterFileName}}
                                    <i style="float: right;color: red;" class="el-icon-warning el-icon--right"></i>
                                </el-link>
                            </div>



                            <!--选择的图片列表-->
                            <div v-if="!errorData.data.length" :infinite-scroll-immediate="true"
                                 style="overflow:auto;border: 1px solid red;width: 100%;height: 300px;"
                                 infinite-scroll-delay="500" infinite-scroll-distance="200" v-infinite-scroll="bioFileListScrollAdd" >

                                <!--<p v-for="i in bioFileListScroll" class="infinite-list-item">{{ i }}</p>-->

                                <el-link icon="el-icon-document" v-for="(item,ind  ) in bioFileListScroll" :title="item.path" :underline="false" class="picName">
                                    {{item.name}}
                                    <i style="float: right" @click="removeBioFile(item.path)" :title="$t('delete')" class="el-icon-close el-icon--right"></i>
                                </el-link>
                            </div>
                            <div v-if="!bioFileList.length&&!errorData.data.length" class="emptyBox">
                                <!--<img src="../assets/common/img/nodataIcon.png" alt="" />-->
                                <div>{{this.i18n.t('No data available')}}</div>
                            </div>
                        </div>
                        {{bioFileListScroll.length}}
                        <p v-if="errorData.data.length">{{this.i18n.t('total')}}  {{errorData.total}} {{this.i18n.t('sheets')}}，{{this.i18n.t('success')}} {{errorData.successCount}}  {{this.i18n.t('sheets')}}，{{this.i18n.t('fail')}} {{errorData.total-errorData.successCount}}  {{this.i18n.t('sheets')}}，{{this.i18n.t('The above is a picture of import failure')}}。</p><br>
                        <p v-if="bioFileList.length&&!errorData.data.length">{{this.i18n.t('total')}} {{bioFileList.length}} {{this.i18n.t('sheets')}} </p>
                    </el-col>
                </el-row>


            </div>
            <div v-if="importType=='file'">
                <el-alert
                        :title="$t('Import prompt information')"
                        show-icon
                        :closable="false"
                        type="warning">
                </el-alert>
                <br>
                <el-form ref="form" :model="form">
                    <el-form-item :label="$t('Import File')">
                        <el-upload
                                class="upload-demo"
                                ref="uploadRY"
                                action="https://jsonplaceholder.typicode.com/posts/"
                                :on-preview="handlePreview"
                                :on-remove="handleRemoveExcel"
                                accept=".xls,.xlsx"
                                :on-change="(event)=>{handleChange(event)}"
                                :auto-upload="false">
                            <el-button icon="el-icon-paperclip" slot="trigger" size="small" type="">{{this.i18n.t('optional accessories')}}</el-button>
                            <br>
                            <div style="display: inline-block" slot="tip" class="el-upload__tip">{{this.i18n.t('Supported file formats')}}：xls、xlsx</div>
                            <el-link type="primary" @click="personnelinfoGetexportpersoninfotoexcelteamplate"
                                     class="downloadTemplate" icon="el-icon-download">{{this.i18n.t('Download Import Template')}}</el-link>
                        </el-upload>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div class="footBtnBox">
            <el-button type="handle" icon="el-icon-back" v-if="importType" @click="backs">{{this.i18n.t('returnsss')}}</el-button>
            <el-button type="handle" @click="handleCloseDialog">{{this.i18n.t('Cancel')}}</el-button>
            <!--导入人员信息-->
            <el-button style="margin-left: 10px;" v-if="personInfoExcelFilePath" size="small" type="primary" @click="submitRYUpload">{{this.i18n.t('import')}}</el-button>
            <!--导入生物信息-->
            <el-button style="margin-left: 10px;" size="small" type="primary" v-if="bioFileList.length" @click="submitBioUpload">{{this.i18n.t('import')}}</el-button>

            <!--<el-button type="primary" :disabled="saveDisabled" @click="submitForm">保存</el-button>-->
        </div>
    </el-dialog>
</template>

<script>
    import {deviceTypeList} from '@/assets/common/js/utils/deviceConfig.js'
    import request from '@/assets/common/js/utils/request'
    import {devicemodelgetlist, getList} from "@/api/jxgl";
    import {personnelinfoGetexportpersoninfotoexcelteamplate,personnelinfoImportpersoninfo,personnelinfoImportpersonbiodatainfo} from "@/api/pcmj/zzxx";
    import { uploadfile, uploadfileinfodata } from '@/api/globaTableData' //引入接口
    import { otaGetSbjx, otaUpdate, otaCreate, otaGet, } from '@/api/otagl'//引入接口
    import { create } from '@/api/document'//引入接口
    export default {
        name: "rygl_import",
        components: {},
        props: {
            importFlag: {
                type: Boolean,
                default: false
            },

            editTableRow: {
                type: Object,
                defautl: () => {
                    return {}
                }
            }
        },
        watch: {
        },
        data() {
            return {
                count: 0,
                maxLength:0,
                bioFileListScroll:[],
                importAccept:'.jpg,.png',
                errorData:{
                    total:0,
                    successCount:0,
                    data:[]
                },
                devTypeList:[],
                personInfoExcelFilePath:'',
                clearBioFlag:false,
                importBioFlag:false,
                bioFileList:[],
                importRYFlag:false,
                importType:'',
                activeName:'jbxx',
                saveDisabled:true,
                loadingTips:false,
                errTips:false,
                percentage:0,
                sbjxArr:null,
                sbxhArr:null,
                fileListBio:[],
                form:{
                    picType:0,
                    helpType:1,
                    deviceModelId:"",
                    modelType:'',
                    version:'',
                    operator:'',
                    fileSize:0
                },
                title: this.i18n.t('import'),
                otaglForm: {
                    name: '',
                    version: "",
                    devieModel: '',
                    description: "",

                },

                syjxVal: [],
                jxTreeList: [],
                jxArr: [],//包含所有的机型名称和id
                option: {
                    type: 'duo', //传spa为单选，duo为多选
                    defaultProps: {
                        children: 'children', //同element的原始配置
                        label: 'name', //同element的原始配置
                        valKey: 'id', //v-model回传时的value-key
                    }
                },
                zhTipFlag: true,
                fileName: '',
                table_config: {
                    table_tbody: [],
                    thead: [
                        {label: "序号", prop: "@id", type: "index", width: "100"},
                        // 图片名
                        {
                            label: this.i18n.t('file name'), prop: 'filePath',
                            width: "", type: "function", callback: (row) => {
                                return row.filePath
                            }
                        },
                        // 姓名
                        {label: this.i18n.t('name'), prop: "name", width: ""},
                        // 失败原因
                        {label: this.i18n.t('failure reason'), prop: "erroMessage", type: "", width: ""},
                    ],
                    // 列表前面是否需要显示 checkbox 框，如要显示 值写成 true
                    checkbox: true,
                    index: true,
                    // 请求表格数据的 url ，可直接传入
                    // url: 'personnelinfo/getlist',
                    // 请求表格数据的 方式
                    // method: "post",
                    // formdataType:false,
                    //表格 title 文字
                    tableTitle: false,
                    //是否需要给 th 加 样式boder 如果需要加上addBoderClass 不需要显示空或者不加这个字段配置
                    addBoderClass: "addBoderClass",
                },
            }
        },
        mounted() {
            this.devTypeList=deviceTypeList
        },
        methods: {
            load () {
                this.count += 100
            },
            handelSuccess(){
                console.log('完毕---------------------');
            },
            algorithm(){
                let abc = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'g', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];
                let [max, min] = [Math.floor(Math.random() * (10 - 7 + 1) + 1), Math.floor(Math.random() * (17 - 10 + 1) + 17)];
                abc = abc.sort(() => 0.4 - Math.random()).slice(max, min).slice(0, 8).join("");
                var a = new Date().getTime() + abc;
                return a
            },
            picTypeChange(val){
                console.log(269,val);
                this.resetBio()
                if(val==2){
                    this.importAccept=".jpg,.png,.jp2"
                }else{
                    this.importAccept=".jpg,.png"
                }
            },
            selectPic(){
                // 清空已选的照片列表和导入失败的列表
                this.resetBio()
                this.$refs['uploadBiosignature'].$refs['upload-inner'].handleClick()
            },
            resetBio(){
                this.errorData.total=0
                this.errorData.successCount=0
                this.errorData.data=[]
                this.bioFileList=[]
            },
            backs(){
                this.resetBio()
                this.importType=''
                this.form.picType=0
            },
            removeBioFile(path){
                console.log(path);
                this.bioFileList.map((item,index,arr)=>{
                    if(item.path==path){
                        arr.splice(index,1)
                    }
                })
                console.log('this.bioFileList',this.bioFileList);
            },
            personnelinfoGetexportpersoninfotoexcelteamplate(){
                personnelinfoGetexportpersoninfotoexcelteamplate().then((res) => {
                    // 人员信息导入模板
                    this.G.exportFile(res, this.i18n.t('Personnel Information Import Template') + new Date().toLocaleString())
                }).catch().finally(() => {

                })
            },
            handleImportChange(type){
                this.importType=type
            },
            // 批量导入生物信息
            personnelinfoImportpersonbiodatainfo(filePathList){
                personnelinfoImportpersonbiodatainfo(filePathList).then(res=>{
                    if (res.code == 200) {
                        var importResult=res.data
                        if(importResult.successCount==importResult.total){
                            this.W.$tips("success", this.i18n.t('Import was successful'));
                            // 更新页面数据
                            this.updateParentData()
                        }else{
                            this.bioFileList=[]
                            var result={
                                total:importResult.total,
                                successCount:importResult.successCount,
                                data:[]
                            }
                            importResult.result.map(item=>{
                                if(!item.isSuccess){
                                    item.filterFileName=item.filePath.slice(item.filePath.lastIndexOf("\\")+1)
                                    result.data.push(item)
                                }
                            })
                            this.errorData=result
                            // this.table_config.table_tbody=result
                        }

                    }
                });
            },
            // 导入生物信息
            submitBioUpload(){
                var fileList=[]
                this.bioFileList.map(item=>{
                    fileList.push(item.path)
                })
                this.personnelinfoImportpersonbiodatainfo({
                    fileNames:fileList,
                    importType:this.form.picType
                })
            },
            // 导入人员信息
            submitRYUpload(){
                this.personnelinfoImportpersoninfo(this.personInfoExcelFilePath)
            },
            handleRemoveExcel(){
                this.personInfoExcelFilePath=""
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePreview(file) {
                console.log(file);
            },
            onchange(file,fileList){
                this.form.fileSize=file.size
                console.log(168,file, fileList);
                this.resetUploadState()
                if(this.$refs.upload.uploadFiles.length>1){
                    this.$refs.upload.uploadFiles.shift()
                }
            },
            resetUploadState(){
                // 进度条进度重置为0
                this.percentage = 0
                // 重置版本号
                this.otaglForm.version=""
                // 禁用弹窗的保存按钮
                this.saveDisabled=true
                // 隐藏服务器校验中的提示
                this.loadingTips=false
                // 隐藏服务器校验失败提示
                this.errTips=false
            },
            removeFile(){
                this.resetUploadState()
            },

            /**
             * @description  关闭弹窗事件
             * @return not
             * @author xiongyi 2022-06-29 16:48:08
             **/
            handleCloseDialog() {
                this.importType=""
                this.updateParentData()
                // this.$emit('update:importFlag', false);
                // this.$emit('update:editTableRow', null);
            },
            /**
             * @description  保存新增活修改数据
             * @param  not
             * @return not
             * @author xiongyi 2022-07-06 10:50:18
             **/
            submitForm() {
                this.$refs.otaglForm.validate((valid) => {
                    if (valid) {
                        const sendData = JSON.parse(JSON.stringify(this.form));
                        var deviceModel="",
                            modelType=""
                        for(var i=0;i<this.sbjxArr.length;i++){
                            if(this.sbjxArr[i].id==sendData.deviceModel){
                                deviceModel=this.sbjxArr[i].name
                            }
                        }
                        for(var i=0;i<this.sbxhArr.length;i++){
                            if(this.sbxhArr[i].devcieTypeId==sendData.deviceModel){
                                modelType=this.sbxhArr[i].modelName
                            }
                        }
                        let query = {
                            // "operator": sendData.operator,
                            "deviceModel": deviceModel,
                            "modelType": modelType,
                            "version": sendData.version,
                            "helpType": sendData.helpType,
                            "description": sendData.description,
                            "fileSize": sendData.fileSize+'',
                            // "operationTime": new Date().toLocaleString(),
                            "isDeleted": true,
                            "fileName": this.fileName
                        }
                        // if (this.syjxVal.length == 0) {
                        //     this.W.$tips("warning", "该机型型号为空，请重新选择");
                        //     return;
                        // }
                        if (this.editTableRow) {
                            query['id'] = sendData.id,
                                otaUpdate(query).then(res => {
                                    // 修改成功
                                    this.W.$tips("success", this.i18n.t('Modified successfully!'));
                                    this.$parent.getTableData();
                                    this.handleCloseDialog();
                                })
                        } else {
                            create(query).then(res => {
                                // 新增成功
                                this.W.$tips("success", this.i18n.t('Add successfully!'));
                                this.$parent.getTableData();
                                this.handleCloseDialog();
                            })
                        }
                    }
                })
            },
            /**
             * @param obj:{item} --file文件
             * @return: not
             * 导入文件的上传组件回调
             */
            ExcelUpload(item) {
                let query = {
                    fileType: "50041",
                    fileName: item.file.name
                }
                uploadfileinfodata(query).then(res => {
                    var _this=this
                    let resdata = res.data
                    let formdata = new FormData();
                    formdata.append("file", item.file);
                    this.fileName = resdata.fileName;
                    for (let key in resdata.fromDatas) {
                        formdata.append(key, resdata.fromDatas[key]);
                    }
                    let query = {
                        url: resdata.uploadUrl,
                        formdata,
                        resheaders: resdata.headers
                    }
                    // uploadfile(query).then(res => {
                    // })

                    request({
                        method: 'post',
                        // 上传地址，因为我这里的request请求是自己封装过的，所以就只需要填写接口后面的地址即可
                        url: resdata.uploadUrl,
                        upFile:true,
                        timeout: -1,
                        data: formdata,
                        // 重点一：complete就是处理后的上传进度数值1-100
                        onUploadProgress: progressEvent => {
                            const complete = parseInt(
                                ((progressEvent.loaded / progressEvent.total) * 100) | 0,
                                10
                            )
                            // 重点二：onProgress()方法需要以上方接收的形参来调用
                            // 这个方法有一个参数"percent"，给他进度值 complete 即可
                            _this.percentage = complete
                            console.log(complete);
                            if(complete==100){
                                _this.loadingTips=true
                            }
                            // param.onProgress({ percent: complete })
                        }
                    }).then(res => {
                        // _this.$refs.upload.clearFiles()
                        console.log(290,res)
                        // 解除保存按钮禁用
                        _this.saveDisabled=false
                        // alert('完成')
                    }).catch(err=>{
                        // 失败时，显示服务器处理文件失败提示
                        _this.errTips=true
                        // 禁用保存按钮
                        _this.saveDisabled=true
                    }).finally(f=>{
                        // 上传请求执行完毕时，隐藏服务器处理中的提示
                        _this.loadingTips=false
                    })
                })
            },
            // 提取文件后缀名
            getSuffix(str) {
                const fileExtension = str.substring(str.lastIndexOf('.') + 1);
                return fileExtension;
            },
            // 更新父页面的数据
            updateParentData(){
                this.$emit("update:importFlag",false);
                this.$parent.getdepartmenttree()
                this.$parent.$refs.globalTable.loading_data()
            },
            // 批量导入人员信息
            personnelinfoImportpersoninfo(filePath){
                personnelinfoImportpersoninfo(filePath).then(res=>{
                    if (res.code == 200) {
                        this.W.$tips("success", this.i18n.t('Import was successful'));
                        // 更新页面数据
                        this.updateParentData()
                    }
                });
            },
            bioFileListScrollAdd(){
                if(this.bioFileListScroll.length){
                    console.log('在滚动',this.bioFileListScroll,this.bioFileListScroll.length+30);
                    var res=this.bioFileList.slice(this.bioFileListScroll.length, this.bioFileListScroll.length + 30)
                    console.log('剪切后',res)
                    this.bioFileListScroll=this.bioFileListScroll.concat(res)
                }else{
                    console.log('无数据啊');
                }

            },
            async handleChangeBio(event,fileList){
                var _this=this
                // console.log(432,event,fileList);
                if (!this.isElectron){
                    // 请在桌面端操作
                    this.W.$tips("warning", this.i18n.t("Please operate on the desktop!"));
                }else{
                    this.importBioFlag=true
                    // console.log('小于2M吗',event.raw.size / 1024 / 1024 < 2);
                    var Suffix=this.form.picType==2?'jpg,png,jp2':'jpg,png'
                    if((Suffix.indexOf(this.getSuffix(event.raw.name))!=-1)&& (event.raw.size / 1024 / 1024 < 2)){

                        //
                        // // 创建一个 FileReader 对象
                        // var reader = new FileReader();
                        // // 读取文件内容
                        // reader.readAsDataURL(event.raw);
                        // // 当文件读取完成后触发 load 事件
                        // reader.onload = function(e) {
                        //     // 将读取的文件内容设置为预览图片的源地址
                        //     // $("#preview").attr("src", e.target.result);
                        //
                        //     _this.bioFileList.push(
                        //         {
                        //             name:event.raw.name,
                        //             path:event.raw.path,
                        //             id:_this.algorithm(),
                        //             result:e.target.result
                        //         }
                        //     )
                        //
                        // };
                        // if(_this.bioFileListScroll.length<=30){
                        //     console.log('*************1*****************',this.bioFileListScroll,_this.bioFileList);
                        //     setTimeout(()=>{
                        //         this.bioFileListScroll=_this.bioFileList.slice(0,30)
                        //         console.log('*************2*****************',this.bioFileListScroll,_this.bioFileList);
                        //     },1000)
                        // }
                        //
                        // return

                       await _this.bioFileList.push(
                            {
                                name:event.raw.name,
                                path:event.raw.path,
                                id:_this.algorithm(),
                                raw:event.raw,
                                // result:event.target.result
                            }
                        )
                        // console.log(_this.bioFileList);

                        if(_this.bioFileListScroll.length<=30){
                            console.log('*************1*****************',this.bioFileListScroll,_this.bioFileList);
                            setTimeout(()=>{
                                this.bioFileListScroll=_this.bioFileList.slice(0,30)
                                console.log('*************2*****************',this.bioFileListScroll,_this.bioFileList);
                            },1000)
                        }

                        return

                        // 创建一个 FileReader 对象
                        var reader = new FileReader();
                        // 读取文件内容
                        reader.readAsDataURL(event.raw);
                        // 当文件读取完成后触发 load 事件
                        reader.onload = function(e) {
                            // 将读取的文件内容设置为预览图片的源地址
                            // $("#preview").attr("src", e.target.result);

                            _this.bioFileList.push(
                                {
                                    name:event.raw.name,
                                    path:event.raw.path,
                                    id:_this.algorithm(),
                                    result:e.target.result
                                }
                            )

                        };


                    }

                    // this.personInfoExcelFilePath=file.raw.path
                }
                console.log(575,this.bioFileList);
            },
            handleChange(file) {
                this.importRYFlag=false
                console.log(file);
                var fileList=this.$refs.uploadRY.$refs["upload-inner"].fileList
                console.log(fileList);

                if (fileList.length > 1) {
                    fileList.splice(0, 1)
                }

                var suffix=this.getSuffix(file.name)
                console.log(396,suffix);
                if(suffix!='xls'&&suffix!='xlsx'){
                    this.W.$tips("warning",this.i18n.t("Please select an Excel file"));
                    return
                }
                if (!this.isElectron){
                    // 请在桌面端操作
                    this.W.$tips("warning", this.i18n.t("Please operate on the desktop!"));
                }else{
                    this.importRYFlag=true
                    this.personInfoExcelFilePath=file.raw.path
                    console.log('文件路径',file.raw.path);
                }
                console.log(file);
            },
            progress(event, file, fileList) {
                console.log(event);
                console.log(file);
                console.log(fileList);
            }
        }
    }
</script>

<style lang="scss" scoped>
    .el-dialog-div {
        height:450px;
        overflow-x: hidden;
        .importSelect{

        }
    }
    .carList{
        background: #f4f4f8;
        color: #0666d2;
        width: 180px;
        height: 350px;
        border: 1px dashed #82b0e8;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: auto;
        box-sizing: border-box;
        .carView{
            text-align: center;
            .desc{
                color: #2478d7;
                margin-top: 5px;
            }
            i{
                font-size: 40px;
            }
        }
        &:hover{
            cursor: pointer;
            opacity: 0.8;
        }
        &:active{
            cursor: pointer;
            opacity: 1;
        }
        &.importPicView{
            width: 100%;
            display: inline-block;
            background: #ffffff;
            overflow-y: scroll;
            padding: 10px;
            box-sizing: border-box;
            .picName{
                display: block;
                line-height: 25px;
            }
        }
        &.importPicView:hover{
            cursor: default;
            opacity: 1;
        }
        &.importPicView:active{
            opacity: 1;
        }
    }
    .bottomTitle{
        text-align: center;
        margin-top: 8px;
    }
    .downloadTemplate{
        line-height: 20px;
        margin-right: 20px;
    }
</style>
<style>
    .el-form-item__content{

    }
    .uploadBiosignature .el-upload-list{
        position: absolute;
        top: -88px;
        left: 250px;
        width: 100%;
        height: 290px;
        overflow-y: scroll;
        overflow-x: hidden;
        box-sizing: border-box;
        border: 1px dashed #82b0e8;
    }
</style>